//
// mixins 方法
//---------------------------------------
.fx() {
  display: flex;
  align-items: center;
  justify-content: center;
}
//rem vw
.height(@height) {
  height: @height/@b-width;
  height: @height/@vw-width;
}

.width(@width) {
  width: @width/@b-width;
  width: @width/@vw-width;
}


// Known issue:
// 指定参数（行数）的功能只支持WebKit。
.ellipsis(...) {
  overflow: hidden;
}

.ellipsis() {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis(@line-number) {
  display: -webkit-box;
  -webkit-line-clamp: @line-number;
  /* autoprefixer: off*/
  -webkit-box-orient: vertical;
  /* autoprefixer: on*/
}

//
// force-wrap
// 阻止长字符串（例如url或无意义连续英文字符）打破布局
.force-wrap() {
  white-space: pre; // CSS 2.0
  white-space: pre-wrap; // CSS 2.1
  white-space: pre-line; // CSS 3.0
  white-space: -pre-wrap; // Opera 4-6
  white-space: -o-pre-wrap; // Opera 7
  white-space: -moz-pre-wrap; // Mozilla
  white-space: -hp-pre-wrap; // HP Printers
  word-wrap: break-word;
}

// clearfix via http://h5bp.com/q
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
}

.inline-block() {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.line-bottom(@line-color) {
  position: relative;
  &:after {
    position: absolute;
    content: "";
    height: 1px;
    transform: scaleY(0.5);
    background: @line-color;
    width: 100%;
    left: 0;
    bottom: 0;
  }
}

.line-cricle(@border-color,@cricle) {
  position: relative;
  &:after {
    content: "";
    width: 200%;
    height: 200%;
    border: 1px solid @border-color;
    transform: scale(0.5);
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-radius: @cricle;
  }
}

.line-left(@color){
  position:relative;
  &:before {
    position:absolute;
    content:"";
    width:1px;
    transform:scaleX(0.5);
    background:@color;
    height:100%;
    left:0;
    top:0;
  }
}
.line-right(@color){
  position:relative;
  &:after {
    position:absolute;
    content:"";
    width:1px;
    transform:scaleX(0.5);
    background:@color;
    height:100%;
    right:0;
    top:0;   
  }
}
